<template>
    <button @click="$emit('toggle-list')" class="toggle-button">
      {{ showList ? '隐藏列表' : '显示列表' }}
    </button>
  </template>
  
  <script setup>
  defineProps({
    showList: Boolean
  });
  defineEmits(['toggle-list']);
  </script>
  
  <style scoped>
  .toggle-button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 20px;
  }
  
  .toggle-button:hover {
    background-color: #0056b3;
  }
  </style>